<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <!-- Semantic UI 框架 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!-- 自己编写的 CSS -->
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment me-padded-tb-mini me-shadow">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h1 class="ui item header teal">江南笑书生</h1>
                <a href="index.html" class="ui item me-mobile-hide me-item">
                    <i class="home icon"></i>首页
                </a>
                <a href="categories.html" class="ui item me-mobile-hide me-item">
                    <i class="idea icon"></i>分类
                </a>
                <a href="tags.html" class="ui item me-mobile-hide me-item">
                    <i class="tags icon"></i>标签
                </a>
                <a href="archives.html" class="ui item me-mobile-hide me-item">
                    <i class="archive icon"></i>归档
                </a>
                <a href="#" class="ui item active me-mobile-hide me-item">
                    <i class="info icon"></i>关于我
                </a>
                <div class="ui right item me-mobile-hide me-item">
                    <div class="ui icon input">
                        <input type="text" placeholder="搜索...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端控制菜单隐藏与显示 -->
        <!-- <a href="#" class="ui menu toggle black icon button me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </a> -->
        <button class="ui secondary icon button menu toggle me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </button>
    </nav>

    <!-- 中间内容 -->
    <div class="ui me-padded-tb-large me-container-small">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="ten wide column">
                    <div class="ui segment">
                        <img src="https://picsum.photos/id/10/1200/800" alt="" class="ui rounded image">
                    </div>
                </div>
                <div class="six wide column">
                    <div class="ui top attached segment">
                        <div class="ui header center aligned">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="me-text" style="font-weight: 400 !important;">
                            江南笑书生，莫得感情的代码机器，目前主攻 Java 后端开发
                        </p>
                        <p class="me-text" style="font-weight: 400 !important;">
                            喜欢编程、读书、看看风景、品品诗词
                        </p>

                    </div>
                    <div class="ui attached segment"></div>
                    <div class="ui attached segment">
                        <div class="ui small labels">
                            <div class="ui teal basic label">Java</div>
                            <div class="ui teal basic label">Spring</div>
                            <div class="ui teal basic label">MyBatis</div>
                            <div class="ui teal basic label">MySQL</div>
                            <div class="ui teal basic label">...</div>
                        </div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="https://github.com/5ME" target="_blank" class="ui black circular icon button">
                            <i class="github icon"></i>
                        </a>
                        <button class="ui green circular wechat icon button" id="wechatButton">
                            <i class="wechat icon"></i>
                        </button>
                        <button class="ui blue circular qq icon button" id="qqButton">
                            <i class="qq icon"></i>
                        </button>
                        <a href="mailto:cplasfyin@163.com" class="ui red circular icon button">
                            <i class="envelope icon"></i>
                        </a>
                    </div>
                    <div class="ui flowing popup transition hidden" id="wechatQR">
                        <img src="./static/img/wechat.jpg" alt="" class="ui small rounded image">
                    </div>
                    <div class="ui flowing popup transition hidden" id="qqQR">
                        <img src="./static/img/qq.png" alt="" class="ui small rounded image">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <footer class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui container center aligned">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <!-- <h4 class="ui inverted header"><i class="wechat icon"></i>与我联系</h4> -->
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/img/wechat.jpg" alt="wechat" class="ui rounded image"
                                style="width: 8em;">
                        </div>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <i class="envelope icon"></i> Email : cplasfyin@163.com
                        </div>
                        <div class="item">
                            <i class="qq icon"></i> QQ : 2916393359
                        </div>
                        <div class="item">
                            <i class="wechat icon"></i> 微信 : DX10485
                        </div>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header">江南笑书生</h4>
                    <p style="opacity: 0.6 !important;">
                        这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这的人有所帮助
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="opacity: 0.5 !important;">
                Copyright
                <i class="copyright outline icon"></i>
                2020 - 2021 Designed by YGQ
            </p>
        </div>
    </footer>

    <script>
        // 控制移动端导航条显示
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });
        // 微信二维码弹出
        $('#wechatButton').popup({
            popup: $('#wechatQR'),
            // on: 'click',
            position: 'top center',
            target: '#wechatButton'
        });
        // QQ二维码弹出
        $('#qqButton').popup({
            popup: $('#qqQR'),
            // on: 'click',
            position: 'top center',
            target: '#qqButton'
        });
    </script>
</body>

</html>